
<template>
  <el-tabs
    tab-position="left"
    style="height: 500px"
    v-model="tabsname"
    @tab-click="gettabsname()"
  >
    <el-tab-pane label="个人基本信息" name="one">
      <el-form label-width="80px" ref="editForm" :model="editForm"  v-loading="loading">
        <el-form-item label="用户名" prop="UserName">
          {{ editForm.UserName }}
        </el-form-item>
        <el-form-item label="姓名" prop="Name">
          <el-input
            size="small"
            style="width: 200px"
            v-model="editForm.Name"
            auto-complete="off"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>

        <el-form-item label="昵称" prop="NickName">
          <el-input
            size="small"
            style="width: 200px"
            v-model="editForm.NickName"
            placeholder="请输入昵称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnsave('editForm')"
            >保存信息</el-button
          >
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="修改密码" name="two">
      <el-form
        label-width="120px"
        ref="editForm"
        :model="editForm"
        :rules="rules"  v-loading="loading"
      >
        <el-form-item label="用户名" prop="UserName">
          {{ editForm.UserName }}
        </el-form-item>
        <el-form-item label="旧密码" prop="Password">
          <el-input
            style="width: 200px"
            size="small"
            v-model="editForm.Password"
            auto-complete="off"
            placeholder="旧密码"
          ></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="NewPassword">
          <el-input
            size="small"
            style="width: 200px"
            v-model="editForm.NewPassword"
            placeholder="新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="NewtwoPassword">
          <el-input
            size="small"
            style="width: 200px"
            v-model="editForm.NewtwoPassword"
            placeholder="确认密码"
          ></el-input>
        </el-form-item>

        <el-form-item label="图形验证码" prop="code">
          <div style="display: flex">
            <el-input
              size="small"
              style="width: 200px"
              v-model="editForm.code"
              placeholder="图形验证码"
            ></el-input>
            <img :src="codeimg" alt="" class="codeimg" @click="getcode()" />
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="btnpwd('editForm')"
            >修改密码</el-button
          >
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="操作日志" name="three"></el-tab-pane>
  </el-tabs>
</template>
<script>
// 导入请求方法
import { req, reqjson } from "@/api/axiosFun";

import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false, //是显示加载
      title: "添加用户",
      editFormVisible: false, //控制编辑页面显示与隐藏
      editForm: {
        GuId: "",
        Name: "",
        NickName: "",
        UserName: "",
        Password: "",
        NewPassword: "",
        NewtwoPassword: "",
        code: "",
      },

      rules: {
        Password: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
          NewPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        NewtwoPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },

      tabsname: "one",
      codeimg: "",
      vcode: "",
      //数据
      DataList: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },

  /**
   * 创建完毕
   */
  created() {
    this.getdata();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    gettabsname() {
      if (this.tabsname == "two") {
        this.getcode();
      }
    },

    getdata() {
      this.loading = true;
      reqjson(
        "post",
        "/UsersApi/GetUsermodel?token=" + this.$jsutils.sessionget("token")
      )
        .then((x) => {
          this.loading = false;
          if (x.success) {
            this.editForm.GuId = x.data.GuId;
            this.editForm.NickName = x.data.NickName;
            this.editForm.Name = x.data.Name;
            this.editForm.UserName = x.data.UserName;
          }
        })
        .catch((x) => {
          this.loading = false;
          console.log(x);
        });
    },

    getcode() {
      req("get", "/CommonApi/GetVerification", {})
        .then((x) => {
          if (x.success) {
            this.codeimg = "data:image/gif;base64," + x.data.images;
            this.vcode = x.data.vcode;
          }
        })
        .catch((x) => {
          this.$message.error(x.data);
        });
    },

    // 获取数据方法
    getlogdata(parameter) {
      let data = {
        page: this.pageparm.currentPage,
        limit: this.pageparm.pageSize,
      };
      this.loading = true;
      reqjson(
        "post",
        "/SysLogApi/GetLogList?token=" + this.$jsutils.sessionget("token"),
        data
      )
        .then((x) => {
          this.loading = false;
          if (x.success) {
            this.pageparm.currentPage = x.data.CurrentPage;
            this.pageparm.pageSize = x.data.ItemsPerPage;
            this.pageparm.total = x.data.TotalItems;
            this.DataList = x.data.Items;
          }
        })
        .catch((x) => {
          this.loading = false;
          console.log(x);
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.getdata(this.formInline);
    },
    //保存基本信息
    btnsave(editForm) {
     
          if (this.$jsutils.isempty(this.editForm.Name)) {
            this.$message.error("姓名不能为空！");
            return false;
          }
          if (this.$jsutils.isempty(this.editForm.NickName)) {
            this.$message.error("昵称不能为空！");
            return false;
          }

          let data = {
            GuId: this.editForm.GuId,
            Name: this.editForm.Name,
            NickName: this.editForm.NickName,
          };
          this.loading = true;
          reqjson(
            "post",
            "/UsersApi/UpdateUsermodel?token=" +
              this.$jsutils.sessionget("token"),
            data
          )
            .then((x) => {
              this.loading = false;
              if (x.success) {
                this.$message.success("操作成功！");
                this.getdata();
              }
            })
            .catch((x) => {
              this.loading = false;
              this.$message.error(x.data);
            });
   
    },
    //保存修改密码
    btnpwd(editForm) {
      this.$refs[editForm].validate((valid) => {
        if (valid) {
          if (this.$jsutils.isempty(this.editForm.Password)) {
            this.$message.error("密码不能为空！");
            return false;
          }
          if (this.$jsutils.isempty(this.editForm.NewPassword)) {
            this.$message.error("新密码不能为空！");
            return false;
          }
          if (this.editForm.NewPassword != this.editForm.NewtwoPassword) {
            this.$message.error("二次密码不一致！");
            return false;
          }
          if (this.$jsutils.isempty(this.editForm.code)) {
            this.$message.error("验证码不能为空！");
            return false;
          }
          if (this.$jsutils.isempty(this.vcode)) {
            this.$message.error("验证码错误，刷新验证码！");
            return false;
          }
          let data = {
            Vcode: this.vcode,
            Code: this.editForm.code,
            Pwd: this.editForm.Password,
            NPwd: this.editForm.NewtwoPassword,
          };

          this.loading = true;
          reqjson(
            "post",
            "/UsersApi/UpdateUserpwd?token=" +
              this.$jsutils.sessionget("token"),
            data
          )
            .then((x) => {
              this.loading = false;
              if (x.success) {
                this.$message.success("操作成功！");
                this.exit();
                //this.getdata();
              }
            })
            .catch((x) => {
              this.loading = false;
              this.$message.error(x.data);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
     exit() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$jsutils.sessionremove("token");

          setTimeout(() => {
            //this.$store.commit("logout", "false");
            this.$router.push({ path: "/login" });
            this.$message({
              type: "success",
              message: "已退出登录!",
            });
          }, 1000);
          window.location.reload();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 